<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目练习</title>
    <style>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            color: unset;
        }
        a:visited{
            color: unset;
        }
        a:hover{
            color: unset;
        }
        ul,ol{
            list-style: none;
        }
        header{
            width: 600px;
            margin: 0 auto;
        }
        header:after{
            display: block;
            content: '';
            clear: both;
        }
        header>span{
            width: 50%;
            display: inline-block;
            float: left;
            text-align: center;
            padding: 15px;
        }
        header>span.active{
            background-color: #f1f1f1;
        }
        main{
            margin: 0 auto;
            width: 600px;
            /*background-color: #fdebcb;*/

        }
        main>ul>li{
            margin: 5px 0;
            padding: 10px;
            transition: all .3s;
        }
        /*main>ul>li:nth-child(odd){*/
            /*background-color: #f1f1f1;*/
        /*}*/
        main>ul>li:hover{
            color: #849fb8;
            background-color: #f1f1f1;
        }
        main>ul{
            display: none;
        }
        main>ul.active{
            display: block;
        }
        main>ul.static>li{
            display: flex;
            flex-direction: row-reverse;
        }
    </style>
</head>

<body>

        <header>
            <span id="span1" class="active">CSS常见效果</span>
            <span id="span2" >静态页面</span>
        </header>
        <main>
            <ul class="cssContent active">
                <li><a href="./css常见效果/轮播.html">轮播</a></li>
                <li><a href="./css常见效果/木桶布局.html">木桶布局</a></li>
                <li><a href="./css常见效果/瀑布流_ajax_新闻页.html">瀑布流+ajax+新闻页</a></li>
                <li><a href="./css常见效果/瀑布流布局.html">瀑布流布局</a></li>
                <li><a href="./css常见效果/图片懒加载.html">图片懒加载</a></li>
                <li><a href="./css常见效果/涟漪按钮.html">涟漪按钮</a></li>
                <li><a href="./css常见效果/头像选择框.html">头像选择框</a></li>
                <li><a href="./css常见效果/导航栏.html">导航栏</a></li>
                <li><a href="./css常见效果/多种垂直居中.html">多种垂直居中</a></li>
                <li><a href="./css常见效果/文字两端对齐.html">文字两端对齐</a></li>
                <li><a href="./css常见效果/tab_switch.html">TAB切换</a></li>
                <li><a href="./css常见效果/伪元素气泡提示框.html">伪元素气泡提示框</a></li>
                <li><a href="./css常见效果/文本溢出.html">文本溢出</a></li>
                <li><a href="./css常见效果/文字两端对齐.html">文字两端对齐</a></li>
            </ul>
            <ul class="static">
                <li><a href="src/仿百度首页/baidu_mock.html">仿百度首页</a></li>
                <li><a href="src/仿企业站首页/index.html">仿idol网站首页</a></li>
                <li><a href="src/平均布局/jq增删平均布局.html">jquery增删平均布局</a></li>
                <li><a href="src/登录注册页/翻转登录注册对话框.html">3d登录注册对话框</a></li>
                <li><a href="src/通知框/notification.html">通知框</a></li>
            </ul>
        </main>

        <script>

            var cssSection = document.querySelector('.cssContent');
            var staticSection = document.querySelector('.static');

            var span1 =  document.querySelector('#span1');
            var span2 = document.querySelector('#span2');
            span1.addEventListener('click',function () {
                span1.classList.add('active');
                span2.classList.remove('active');
                cssSection.classList.add('active');
                staticSection.classList.remove('active');
            })
            span2.addEventListener('click',function () {
                span1.classList.remove('active');
                span2.classList.add('active');
                staticSection.classList.add('active');
                cssSection.classList.remove('active');
            })
        </script>

</body>
</html>